<script setup>
import { ref, reactive, onMounted,nextTick, getCurrentInstance } from 'vue'

import { ElMessage,ElMessageBox } from 'element-plus'

import { get, post } from '@/myaxios'

/**删除功能 */
const deleteFormOpen = async (row) => {
    ElMessageBox.confirm(`确定删除[ ${row.roomId}-${row.roomName}-${row.roomOwnerCustomerName} ]大厅吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            operationData("playRoom/delete", row)
        })
        .catch(() => {
            console.log('cancel');
            
        })
}

/**修改功能 */
const editDialogVisible = ref(false)
const editForm = reactive({
    editData: {
        categoryName: '',
        parentId: '',
        roomOpenStatus: '',
        roomSpeechStatus: '',
        roomNotice: ''
    }
})
const editFormSubmit = async () => {
    editDialogVisible.value = false;
     operationData("playRoom/edit", editForm.editData)
}
const editFormOpen = async (row) => {
  editDialogVisible.value = true;
  const resp = await get("playRoom/getRoomById", { roomId: row.roomId });
  if (resp.data.code === 2000) {
    editForm.editData = resp.data.returnData;
  }
}

//修改大厅状态 公用函数
const changeSwitch = (row,type)=>{
    //弹窗信息
    let showMsg;
    //参数key
    let roomStatusKey;
    //参数值
    let roomStatusVal;
    //根据按钮不同 使用不同的参数
    if(type == 'Open'){
        showMsg = '开播'
        roomStatusKey = 'roomOpenStatus'
        roomStatusVal = row.roomOpenStatus;
    }else{
        showMsg = '禁言'
        roomStatusKey = 'roomSpeechStatus'
        roomStatusVal = row.roomSpeechStatus;
    }

    ElMessageBox.confirm(
    `确认修改大厅${showMsg}状态为[ ${roomStatusVal==1?'正常':'禁止'} ]`,
    '注意',
    { 
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
        //确认时 根据按钮准备参数
        let params = {roomId:row.roomId}
        params[roomStatusKey] =roomStatusVal
        console.log(params);
        //发送修改请求
        operationData("playRoom/editPlyRoomStauts", params)
    })
    .catch(() => {
        //取消时还原按钮状态
        console.log('cancel');
        row[roomStatusKey] = roomStatusVal==1?0:1;
    })

}

/**添加功能 */
const addDialogVisible = ref(false)
const addForm = reactive({
    roomId: '',
    roomName: '',
    roomOwnerCustomer: '',
    categoryId: '',
    roomCategroyLevel1: '',
    roomCategroyLevel2: '',
    roomNotice: '',
    roomOpenStatus: 1,
    roomSpeechStatus: 1,
    roomPush: 1
})
const addFormRef = ref()
const addFormSubmit = async () => {
    
    if (addForm.roomCategroyLevel2 == '' && optionsList.optionsDataAdd.length > 0) {
      ElMessage.warning('请选择大厅小类')
      return
    }
    addDialogVisible.value = false;
     operationData("playRoom/add", addForm)
}

const addFormOpen = async () => {
  addDialogVisible.value = true;
  nextTick(() => {
    addFormRef.value.resetFields();
    optionsList.optionsDataAdd = [];
  })
}
const changeAddCategroyLevel2 = async (val)=>{
  //清空下拉列表
  optionsList.optionsDataAdd = [];
  //查询下拉列表
  const resp = await get(`playRoom/listRoomCategory`, { parentId: val });
  if(resp.data.code == 2000){
        optionsList.optionsDataAdd = resp.data.returnData;
  }else if(resp.data.code == 2001){
        addForm.roomCategroyLevel2 = '';
  }
}


/**
 * 条件查询
 * 
 */
const showNotice = (notice)=>{
    ElMessageBox({
        title: '大厅公告',
        message: notice
    })

}
 const queryForm = reactive({

    roomName: '',
    roomOwnerCustomerName: '',
    roomCategroyLevel1: '',
    roomCategroyLevel2: ''
})

const onSubmit = ()=>{
  queryData(queryForm);
}
const onReset = ()=>{
  queryFormRef.value.resetFields();
  optionsList.optionsData2 = [];
  queryData({});
}
//pid下拉列表使用的动态数据
 const optionsList = reactive({ optionsData1:[],
                                optionsData2:[],
                                optionsDataAdd:[]
 }) 


//获得查询表单组件对象
const queryFormRef = ref()



/**
 * 分页组件
 */
//分页组件参数对象
const pageInfo = reactive({
  pageData: {
    page: 1,
    pageSize: 10,
    total: 77
  }
})
//分页组件函数
//页码改变
const handleCurrentChange = (val) => {
  console.log(val);
  //通过对象操作数据 通过工具转成需要的格式
  pageInfo.pageData.page = val;
  //合并对象
  let paramsObj ={...pageInfo.pageData,...queryForm};
  queryData(paramsObj);

}
//每页显示记录改变
const handleSizeChange = (val) => {
  console.log(val);
  pageInfo.pageData.page = 1;
  pageInfo.pageData.pageSize = val;
  //合并对象
  let paramsObj ={...pageInfo.pageData,...queryForm};
  queryData(paramsObj);

}
//table列表数据
const tableList = reactive({ tableData: [] })
const changeCategroyLevel2 = async (val)=>{
  //清空下拉列表
  optionsList.optionsData2 = [];
  //查询下拉列表
  const resp = await get(`playRoom/listRoomCategory`, { parentId: val });
  if(resp.data.code == 2000){
        optionsList.optionsData2 = resp.data.returnData;
  }else if(resp.data.code == 2001){
        queryForm.roomCategroyLevel2 = '';
  }
}




/**
 * 公共函数
 * 
 */
//查询公共函数
const queryData = async (params) => {
  const resp = await get("playRoom/query", params);
  if (resp.data.code === 2000) {
    // 更新table数据
    tableList.tableData = resp.data.returnData;
    // 更新分页组件数据
    pageInfo.pageData = resp.data.pageInfo;
  } else if (resp.data.code === 2001) {
    tableList.tableData = [];
    pageInfo.pageData = { page: 1, pageSize: 10, total: 0 };
  }
}
const querySelect = async (level) => {
  const resp = await get(`playRoom/listRoomCategory`, { parentId: level });
  if (resp.data.code === 2000) {
    optionsList.optionsData1 = resp.data.returnData;
  }
}
const operationData = async (url, params) => {
  const resp = await post(url, params);
  console.log(resp);
  // 根据执行结果 显示操作反馈
  if (resp.data.code === 2010) {
    ElMessage.success(resp.data.msg)
  } else if (resp.data.code === 2011) {
    ElMessage.error(resp.data.msg)
  }
  // 刷新table和分页数据
  // 在当前查询条件下 刷新数据
  let paramsObj = { ...pageInfo.pageData, ...queryForm };
  queryData(paramsObj);
}

onMounted(() => {
  //首次查询table数据
  queryData({});
  //查询pid下拉列表的选项值 动态生成
  querySelect(0);

})
</script>
<template>
    <el-form ref="queryFormRef" :inline="true" :model="queryForm">

        <el-form-item label="大厅名称" prop="roomName">
            <el-input v-model="queryForm.roomName" placeholder="roomName" />
        </el-form-item>
        <el-form-item label="房主名称" prop="roomOwnerCustomerName">
            <el-input v-model="queryForm.roomOwnerCustomerName" placeholder="ownerName" />
        </el-form-item>
        <el-form-item label="一级分类" prop="roomCategroyLevel1">
            <!-- <el-input v-model="queryForm.parentId" placeholder="parentId" /> -->
            <el-select style="width: 180px;"
                v-model="queryForm.roomCategroyLevel1"
                placeholder="categroy1" @change="changeCategroyLevel2">
                <el-option v-for="options in optionsList.optionsData1" :label="options.categoryName" :value="options.categoryId" />
            </el-select>

        </el-form-item>
        <el-form-item label="二级分类" prop="roomCategroyLevel2">
            <!-- <el-input v-model="queryForm.parentId" placeholder="parentId" /> -->
            <el-select style="width: 180px;"
                v-model="queryForm.roomCategroyLevel2"
                placeholder="categroy2">
                <el-option v-for="options in optionsList.optionsData2" :label="options.categoryName" :value="options.categoryId" />
            </el-select>

        </el-form-item>
        <el-form-item>
            <el-button type="primary" plain @click="onSubmit">查询</el-button>
            <el-button type="primary" plain @click="onReset">重置</el-button>
            <el-button type="primary" plain @click="addFormOpen">添加</el-button>

        </el-form-item>
    </el-form>

    <el-table height="500px" ref="tableRef" :data="tableList.tableData" style="width: 100%">
        <el-table-column fixed="left" prop="roomId" label="大厅编号" width="80">
            <template #default="scope">
                <el-tag type="primary"> {{scope.row.roomId}} </el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="roomName" label="大厅名称" width="180">
        </el-table-column>
        <el-table-column prop="roomCategoryL1" label="一级分类" width="80">
            <template #default="scope">
                <el-tag v-if="scope.row.roomCategoryL2" type="success"> {{scope.row.roomCategoryL1}} </el-tag>
                <el-tag v-else type="success" effect="plain">{{scope.row.roomCategoryL1}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="roomCategoryNameL1" label="一类名称" width="180">
            <template #default="scope">
                <el-tag v-if="scope.row.roomCategoryL2" type="success"> {{scope.row.roomCategoryNameL1}} </el-tag>
                <el-tag v-else type="success" effect="plain">{{scope.row.roomCategoryNameL1}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="roomCategoryL2" label="二级分类" width="80">
            <template #default="scope">
                <el-tag v-if="scope.row.roomCategoryL2" type="warning"> {{scope.row.roomCategoryL2}} </el-tag>
                
            </template>
        </el-table-column>
        <el-table-column prop="roomCategoryNameL2" label="二类名称" width="180">
            <template #default="scope">
                <el-tag v-if="scope.row.roomCategoryL2" type="warning"> {{scope.row.roomCategoryNameL2}} </el-tag>
                
            </template>
        </el-table-column>
        <el-table-column prop="roomOwnerCustomer" label="房主编号" width="80"></el-table-column>
        <el-table-column prop="roomOwnerCustomerName" label="房主名称" width="180"></el-table-column>
        <el-table-column prop="roomNotice" label="房间公告" width="180">
            <template #default="scope">
                <el-link href="javascript:void(0)" type="primary" @click="showNotice(scope.row.roomNotice)">
                    <span v-if="scope.row.roomNotice.length>=8">{{scope.row.roomNotice.substr(0,8)}}...</span>
                    <span v-else>{{scope.row.roomNotice}}</span>
                </el-link>
            </template>
        </el-table-column>
        <el-table-column prop="roomPush" label="推荐状态" width="180">
            <template #default="scope">
                <el-tag v-if="scope.row.roomPush == 1" type="primary"> 正常 </el-tag>
                <el-tag v-else-if="scope.row.roomPush == 2" type="success">首页推荐</el-tag>
                <el-tag v-else type="info">{{scope.row.roomPush}}</el-tag>
            </template>
        </el-table-column>

        <el-table-column fixed="right" prop="roomOpenStatus" label="开播状态" width="80">
            <template #default="scope">
                <el-switch
                        v-model="scope.row.roomOpenStatus"
                        inline-prompt
                        active-text="正常"
                        inactive-text="禁止"
                        :active-value="1"
                        :inactive-value="0"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                        @change="changeSwitch(scope.row,'Open')"
                    />
            </template>
        </el-table-column>
        <el-table-column fixed="right" prop="roomSpeechStatus" label="禁言状态" width="80">
            <template #default="scope">
                <el-switch
                        v-model="scope.row.roomSpeechStatus"
                        inline-prompt
                        active-text="正常"
                        inactive-text="禁止"
                        :active-value="1"
                        :inactive-value="0"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                        @change="changeSwitch(scope.row,'Speech')"
                    />
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
            <template #default="scope">
                <el-button type="primary" plain size="small" @click="editFormOpen(scope.row)">编辑</el-button>
                <el-button type="primary" plain size="small" @click="deleteFormOpen(scope.row)">删除</el-button>
            </template>
        </el-table-column>

    </el-table>

    <el-pagination v-model:current-page="pageInfo.pageData.page" v-model:page-size="pageInfo.pageData.pageSize"
        :page-sizes="[10, 20, 30]" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.pageData.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />

      <!-- 添加对话框 -->
      <el-dialog v-model="addDialogVisible" title="添加" width="700">

    <el-form ref="addFormRef" :model="addForm" label-width="auto" style="max-width: 700px">
        <el-row>
            <el-col :span="12">
                
        <el-form-item label="大厅编号" prop="roomId">
        <el-input v-model="addForm.roomId" placeholder="roomId" />
      </el-form-item>


            </el-col>
            <el-col :span="12">
                <el-form-item label="大厅名称" prop="roomName">
        <el-input v-model="addForm.roomName" placeholder="roomName" />
      </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="房主编号" prop="roomOwnerCustomer">
        <el-input v-model="addForm.roomOwnerCustomer" placeholder="roomOwnerCustomer" />
      </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="推荐级别" prop="roomPush">
        <el-select style="width: 100%;"
                v-model="addForm.roomPush"
                placeholder="roomPush">
                <el-option label="正常" :value="1" />
                <el-option label="首页推荐" :value="2" />
            </el-select>
      </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="大厅大类" prop="roomCategroyLevel1">
            <!-- <el-input v-model="queryForm.parentId" placeholder="parentId" /> -->
            <el-select style="width: 100%;"
                v-model="addForm.roomCategroyLevel1"
                placeholder="categroy1" @change="changeAddCategroyLevel2">
                <el-option v-for="options in optionsList.optionsData1" :label="options.categoryName" :value="options.categoryId" />
            </el-select>

        </el-form-item>
            </el-col>
            <el-col :span="12">
                
        <el-form-item label="大厅小类" prop="roomCategroyLevel2">
            <!-- <el-input v-model="queryForm.parentId" placeholder="parentId" /> -->
            <el-select style="width: 100%;"
                v-model="addForm.roomCategroyLevel2"
                placeholder="categroy2">
                <el-option v-for="options in optionsList.optionsDataAdd" :label="options.categoryName" :value="options.categoryId" />
            </el-select>

        </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="开播状态" prop="roomOpenStatus">
        <el-select style="width: 100%;"
                v-model="addForm.roomOpenStatus"
                placeholder="roomOpenStatus">
                <el-option label="停播" :value="0" />
                <el-option label="开播" :value="1" />
            </el-select>
      </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="禁言状态" prop="roomSpeechStatus">
        <el-select style="width: 100%;"
                v-model="addForm.roomSpeechStatus"
                placeholder="roomSpeechStatus">
                <el-option label="禁言" :value="0" />
                <el-option label="非禁言" :value="1" />
            </el-select>
      </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-form-item label="大厅公告" prop="roomNotice">
        <el-input type="textarea" v-model="addForm.roomNotice" placeholder="roomNotice" />
      </el-form-item>
            </el-col>

        </el-row>

    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addFormSubmit">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 修改对话框 -->
  <el-dialog v-model="editDialogVisible" title="修改" width="700">
    <el-form ref="editFormRef" :model="editForm.editData" label-width="auto" style="max-width: 700px">
        <el-row>
            <el-col :span="12">
                
        <el-form-item label="大厅编号" prop="roomId">
        <el-input disabled v-model="editForm.editData.roomId" placeholder="roomId" />
      </el-form-item>


            </el-col>
            <el-col :span="12">
                <el-form-item label="大厅名称" prop="roomName">
        <el-input v-model="editForm.editData.roomName" placeholder="roomName" />
      </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="房主编号" prop="roomOwnerCustomer">
        <el-input v-model="editForm.editData.roomOwnerCustomer" placeholder="roomOwnerCustomer" />
      </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="推荐级别" prop="roomPush">
        <el-select style="width: 100%;"
                v-model="editForm.editData.roomPush"
                placeholder="roomPush">
                <el-option label="正常" :value="1" />
                <el-option label="首页推荐" :value="2" />
            </el-select>
      </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-form-item label="大厅公告" prop="roomNotice">
        <el-input type="textarea" v-model="editForm.editData.roomNotice" placeholder="roomNotice" />
      </el-form-item>
            </el-col>

        </el-row>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="editFormSubmit">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>


</template>
<style scoped>

</style>